<template>
  <div class="knowledge-list">
    <scroll-container ref="scrollContainer" :listenShowNav="false">
      <multiList @scrollTo="scrollTo" :groupDatas="groupDatas" :groupOffset="1" :head="head" @lastAfter="lastAfter" @firstBefore="firstBefore">
        <ul>
          <li
            :class="[{active:groupDatas.focArr[0][index]}]"
            :data-index="'tar_1_'+index"
            v-for="(item,index) in groupDatas.dataArr[0].data"
            :key="index"
          >{{item.segment.name.indexOf('.') ? item.segment.name.split('.')[0] : item.segment.name}}</li>
        </ul>
      </multiList>
    </scroll-container>
  </div>
</template>
<script>
import scrollContainer from "@/components/base/scroll-container/scroll-container";
import multiList from "@/components/base/multi-list/multi-list";
import imglist_w312 from "../ImgList_w312";
export default {
  components: {
    scrollContainer,
    multiList,
    imglist_w312
  },
  props: ["groupDatas", "group"],
  methods: {
    scrollTo(targetIndex) {
      this.$refs.scrollContainer.scrollTo(targetIndex);
    },
    firstBefore(){
      this.$emit('firstBefore')
    },
    lastAfter(){
      this.$emit('lastAfter')
    }
  },
  data() {
    return {
      groups: [1],
      scrollY: 0,
      hs: this.$store.state.hs,
      head: {
        left: "0-0"
      }
    };
  },
  created() {
    // console.log(this.groupDatas);
  }
};
</script>
<style lang="less" scoped>
.knowledge-list {
  align-items: center;
  display: flex;
  justify-content: center;
  overflow: hidden;
  .content {
    height: 642px;
    ul {
      display: block;
      flex-direction: column;
      list-style: none;
      li {
        margin-bottom: 48px;
        width: 934px;
        height: 90px;
        line-height: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 44px;
        align-items: center;
        font-size: 30px;
        list-style: none;
      }
      .active {
        background-color: #0e60e9;
        border-radius: 8px;
        border: 2px solid #fff;
        color: #fff;
      }
    }
  }
}
</style>
